<template>
  <view class="relative bg-white order-list flex flex-col h-full">
    <nav-bar color="white" bg-color="black" title="菜品分类管理" show-back></nav-bar>
    <u-row gutter="10rpx" :customStyle="rowFillterBar">
      <!-- <u-col span="3">
        <u-search
          shape="square"
          placeholder="请输入品类名称"
          v-model="filterPam.name"
          search-icon-size="15rpx"
          @search="onSearch"
          @custom="onSearch"
          @clear="onSearch"
        ></u-search>
      </u-col> -->
      <!-- <u-col span="1">
        <u-button type="info" color="lightgrey" @click="resetFilter">重置</u-button>
      </u-col> -->
      <u-col span="1">
        <u-button type="primary" color="orange" @click="addItem">新增类别</u-button>
      </u-col>
    </u-row>
    <u-row customStyle="flex:1;height:100%;align-items: baseline;">
      <view class="px-12rpx w-full box-border flex flex-col h-full">
        <uni-table :loading="pageStatus.loading" class="table-height" stripe emptyText="暂无更多数据" :border="true">
          <!-- 表头行 -->
          <uni-tr class="thead-tr">
            <uni-th align="center">序号</uni-th>
            <uni-th align="center">名称</uni-th>
            <uni-th align="center">描述</uni-th>
            <uni-th align="center" class="thead">操作</uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="(item, index) in orderList" :key="item.buffetOrderId">
            <uni-td align="center">{{ index + 1 }}</uni-td>
            <uni-td align="center">{{ item.name }}</uni-td>
            <uni-td align="center">{{ item.remark }}</uni-td>
            <uni-td align="center" class="tdata">
              <view class="relative form-item-btns flex justify-evenly items-center">
                <u-icon
                  v-for="(btn, index) in itemBtns"
                  :key="index"
                  :name="btn.icon"
                  :label="btn.name"
                  label-pos="bottom"
                  size="15rpx"
                  :color="btn.color || 'grey'"
                  :label-color="btn.color || 'grey'"
                  @click="btn.onClick(item)"
                ></u-icon>

                <!-- <kui-pop-selector :isSelectedMode="true" :items="itemBtns" padding="0rpx 10rpx" fontSize="10rpx">
                  <u-button color="#f0f0f0" custom-style="color:grey">更多</u-button>
                </kui-pop-selector> -->
              </view>

              <!-- <u-button type="primary" @click="recharge(item)">充值</u-button> -->
            </uni-td>
          </uni-tr>
        </uni-table>
        <view class="pagination-box">
          <!-- <uni-pagination
            show-icon
            :page-size="filterPam.size"
            :current="filterPam.current"
            :total="filterPam.total"
            @change="pageChange"
          /> -->
        </view>
      </view>
    </u-row>

    <common-popup ref="refCommonPopup">
      <template #content>
        <u-form :model="formData" :rules="formRules" ref="refForm" label-position="top" label-width="5rem">
          <u-form-item label="类品名称" prop="name" required>
            <u-input v-model="formData.name" placeholder="请输入类品名称" clearable />
          </u-form-item>
          <u-form-item label="描述">
            <u-textarea v-model="formData.remark" placeholder="请输入描述"></u-textarea>
          </u-form-item>
        </u-form>
      </template>
    </common-popup>

    <resultPopup ref="refResultPopup" :show-icon="false">
      <!-- <template #default="{ result }">
        <view class="p-10rpx my-30rpx flex-col items-center justify-center text-center"> {{ result.content }}</view>
      </template> -->
      <template #confirm="{ config }">
        <view class="btns flex">
          <view class="btns-item" @click="refResultPopup.close()">
            <text class="btns-item-txt"> 取消 </text>
          </view>
          <view class="btns-item confirm" @click="refResultPopup.close()">
            <text class="btns-item-txt"> 确定 </text>
          </view>
        </view>
      </template>
    </resultPopup>
  </view>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { getFoolTypeList, foodDel, foodAdd, foodEdit } from "@/api";
import resultPopup from "@/components/common-popup/result-popup.vue";
import { useStore } from "vuex";
const store = useStore();

const itemBtns = [
  {
    name: "编辑",
    value: "edit",
    icon: "edit-pen",
    onClick: (item: any) => {
      formData.name = item.name;
      formData.remark = item.remark;
      refCommonPopup.value?.open({
        title: "更新类别",
        confirmText: "确定",
        cancelText: "取消",
        // 自定义
        mode: "update",
        onConfirm: () => updateFood(item),
      });
    },
  },
  {
    name: "删除",
    value: "remove",
    icon: "trash",
    color: "red",
    onClick: (item: any) => {
      uni.showModal({
        title: "提示",
        content: "确定删除该类品吗？",
        success(res) {
          if (res.confirm) {
            deleteFood(item);
            // console.log(error);
          }
        },
      });
    },
  },
];

const rowFillterBar = `
    padding:8rpx;
    position: sticky;
    top: 10vh;
    background: white;
    z-index: 2;
`;

const pageStatus = reactive({
  loading: false,
});

const filterPam = reactive({
  name: "", // 菜品名称 keyword
  parentId: "0", // 菜品类型id （foodTypeId）
});

const onSearch = () => {
  getPageData();
};

const resetFilter = () => {
  filterPam.name = "";
  getPageData();
};

const orderList = ref([]);

const getPageData = async () => {
  pageStatus.loading = true;
  try {
    const pam = {
      parentId: 0,
      dataType: 1,
      typeStatus: 1,
      ...filterPam,
    };
    const { data, success } = await getFoolTypeList(pam);
    console.log(data);
    if (!success) throw new Error("获取数据失败");
    orderList.value = data;
    pageStatus.loading = false;
  } catch (error) {
    pageStatus.loading = false;
    console.error(error);
  }
};

const refCommonPopup = ref();
const addItem = () => {

  // 重置表单
  Object.assign(formData, defultData);


  refCommonPopup.value?.open({
    title: "新增类别",
    confirmText: "确定",
    cancelText: "取消",
    onConfirm: async (config) => {
      console.log("新增类别 >>", config);
      try {
        const pam = { ...formData };
        await foodAdd(pam);
        refResultPopup.value.open({
          title: "新增成功",
          autoClose: true,
          showIcon: true,
          type: "success",
          //----- 自定义数据
        });
        // 刷新
        getPageData();
      } catch (error) {
        refResultPopup.value.open({
          title: "新增失败",
          content: error.toString(),
          autoClose: true,
          showIcon: true,
          type: "fail",
          //----- 自定义数据
        });
        console.error(error);
      }
    },
  });
};


const defultData = {
  name: "",
  remark: "",
  businessId: store.getters.businessInfo.businessId,
  dataType: "1",
  baseLevel: 1,
  parentId: 0,
  typeStatus: "1",
}

const formData = reactive({...defultData});

const formRules = {
  name: [{ required: true, message: "请输入类品名称", trigger: "blur" }],
};

const refResultPopup = ref();

onMounted(async () => {
  getPageData();
});

// 删除类品
const deleteFood = async (item) => {
  try {
    const pam = { ids: item.foodTypeId };
    const { data, success } = await foodDel(pam);
    if (!success) throw new Error("删除失败");
    uni.showToast({ title: "删除成功" });
    getPageData();
  } catch (error) {
    console.log(error);
    uni.showToast({ title: "删除失败", icon: "fail" });
  }
};

// 修改类品
const updateFood = async (item) => {
  try {
    const pam = { ...item, ...formData };
    await foodEdit(pam);
    refResultPopup.value.open({
      title: "修改成功",
      autoClose: true,
      showIcon: true,
      type: "success",
      //----- 自定义数据
    });
    // 刷新
    getPageData();
  } catch (error) {
    refResultPopup.value.open({
      title: "修改失败",
      content: error.toString(),
      autoClose: true,
      showIcon: true,
      type: "fail",
      //----- 自定义数据
    });
    console.error(error);
  }
};
</script>
<style lang="scss" scoped>
.order-list {
  ::v-deep .u-search__content {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-right: -10px;
    height: 25rpx;

    // .u-search__content__icon {
    //   display: none;
    // }

    .uni-input-input {
      height: 25rpx;
    }
  }
  ::v-deep .u-search__action {
    background: var(--kui-color-theme);
    max-height: 25rpx;
    height: 25rpx;
    border-radius: 3rpx;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5rpx;
    font-size: 10rpx;
  }

  ::v-deep .u-button {
    border-radius: 3rpx;
    height: 25rpx;
  }
}

.fixed-left {
  position: sticky;
  background-color: white;
  left: 0;
}

.fixed-right {
  // display: flex;
  position: sticky;
  right: 0;

  &.thead {
    display: block;
    box-shadow: -6px 0px 5px 0px #e7e7e7;
  }

  &.tdata {
    background-color: white;
    box-shadow: -6px 0px 5px 0px #e7e7e7;
  }
  ::v-deep .u-button {
    margin-right: 5rpx;
    height: 20rpx;
  }
}

.form-item-btns {
  position: relative;
  // ::v-deep .kingon-select-menu{
  //   font-size: 10rpx;
  //   z-index: 6;
  // }
}

.thead-tr {
  position: sticky;
  top: 0;
}

.table-height {
  // max-height: 70vh;
  flex: auto;

  ::v-deep &.uni-table-scroll {
    border: 1px #ebeef5 solid;
  }
}

.pagination-box {
  padding: 10rpx;
  display: flex;
  flex-direction: row;
  justify-content: right;
  position: sticky;
  bottom: 0;
  background: white;
}

.btns-item {
  background-color: #efefef;
  padding: 5rpx 20rpx;
  border-radius: 5rpx;
  margin: 0rpx 15rpx;
  font-size: 12rpx;
  &.confirm {
    color: white;
    background-color: red;
  }

  .btns-item-txt {
    font-size: 10rpx;
    padding: 5rpx 15rpx;
  }

  ::v-deep .u-button {
    padding: 2rpx 20rpx;
  }
}
</style>
